<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp-baidu</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.1/vue-resource.js"></script>
</head>
<body>
<div id="case8-demo1">
    <input type="text" name="" v-model="wd" v-on:input="baiduChange">
    <ul>
        <li v-for="i in obj"><a v-bind:href='"https://www.baidu.com/s?wd=" + i.q'>{{i.q}}</a></li>
    </ul>
</div>
</body>
<script type="text/javascript">
    var case8Demo=new Vue({
        el:"#case8-demo1",
        data:{
            obj:{},
            wd:""
        },
        methods:{
            baiduChange:function () {
                this.$http.jsonp("https://www.baidu.com/sugrec",{
                    params:{
                        wd:this.wd,
                        prod:'pc'
                    }
                })
                .then(function (data) {
                    this.obj=data.data.g
                },function (error) {
                    console.log(error)
                })
            }
        }
    })
</script>
</html>